<template>
  <div class="pay">
    <x-header title="支付" :left-options="{backText:''}" class='whiteHeader' @click.native='goBack'></x-header>
    <!-- 当存在美容商品时显示美容车辆信息 -->
    <div class="address" v-if='(shopClass==3||shopClass==2)&&selectCars.length>0' @click='selectCarMess'>
      <div class="addressTop">
        <div class="user">
          <img src="../assets/image/pay/carBrand.png" alt="" />
          <span>{{selectCars[0].LICENCE}}</span>
        </div>
      </div>
      <div class="addressBot">
          <img src="../assets/image/pay/car.png" alt="" />
          <span>{{selectCars[0].BRAND}} {{selectCars[0].SET}} {{selectCars[0].MODEL}}</span>
      </div>
    </div>
    <!-- 当存在车品时显示收货地址 -->
    <div class="address" v-if='addFlag==1&&(shopClass==3||shopClass==1)' @click='selectAddress'>
      <div class="addressTop">
        <div class="user">
          <img src="../assets/image/pay/user.png" alt="" />
          <span>{{address[0].CONTACT}}</span>
        </div>
        <div class="tel">
          <img src="../assets/image/pay/tel.png" alt="" />
          <span>{{address[0].PHONE}}</span>
        </div>
      </div>
      <div class="addressBot">
          <img src="../assets/image/pay/address.png" alt="" />
          <span v-if='!payFrom'>{{address[0].PROVINCE}} {{address[0].RANGE}} {{address[0].ADDRESS}}</span>
          <span v-if='payFrom'>{{address[0].detailAddress}}</span>
      </div>
    </div>
    <div class="address noAddress" v-if='addFlag==0&&(shopClass==3||shopClass==1)' @click='addAddress'>
      <img src="../assets/image/pay/add.png" alt="">
      <span>请填写您的收货地址</span>
    </div>
    <shopPay :shopComMess='item' v-for='(item,index) in showShopMess' :key='index'>
    </shopPay>
    <div class="voucher tong border-bottom" v-if='!payFrom'>
      <label>通币</label>
      <span>共{{allTong}}通币,可用{{useTongB}}通币
        <img src="../assets/image/pay/question.png" alt="" @click='showTongRule'/>
      </span>
      <group>
      <x-switch title='' v-model="tongVal" class='switch' v-if='useTongB>100'></x-switch>
      </group>
    </div>
    <div class="useB border-bottom" v-if='tongVal&&!payFrom'>
      <label>使用</label>
      <span class="useNum" @click='useTong'>
        {{useB }}
        <img src="../assets/image/pay/down.png" alt=""/>
      </span>
      <em>通币，抵</em><span>￥{{useB/100}}</span>
    </div>
    <!-- 订单支付信息来自商品 -->
    <div class="settle" v-if='!payFrom'>
      <span v-if='tongVal'>抵币:<em>￥{{useB/100}}</em></span>
      <span>合计:<em v-if='tongVal' class="settleAll">￥{{(sum-useB/100).toFixed(2)}}</em>
      <em v-if='!tongVal'>￥{{sum.toFixed(2)}}</em>
      </span>
    </div>
    <!-- 订单支付信息来自订单列表 -->
    <div class="settle" v-if='payFrom'>
      <span v-if='shopMess.TB_NUM'>抵币：<em>￥{{shopMess.TB_NUM/100}}</em></span>
      <span>合计：<em class="settleAll">￥{{(shopMess.sum)}}</em>
      </span>
    </div>
  	<p class="payOnline" v-if='!payFrom&&((tongVal&&(sum-useB/100)!=0)||(!tongVal&&sum!=0))'>在线支付</p>
  	<div class="commonListBox" v-if='!payFrom&&((tongVal&&(sum-useB/100)!=0)||(!tongVal&&sum!=0))'>
  		<ul class="orderRealList">
  			<li v-if="!isWX">
  				<table>
  					<tr>
  						<td width="93%">
  							<img src="../assets/image/pay/aliPay.png" alt="" width="30" height="30" style="vertical-align: bottom;"> 支付宝
  						</td>
  						<td width="7%" style="text-align:right;">
  							<i class="payGou payGouChoose"></i>
  						</td>
  					</tr>
  				</table>
  			</li>
  			<li v-if="isWX">
  				<table>
  					<tr>
  						<td width="93%">
  							<img src="../assets/image/pay/WXpay.png" alt="" width="30" height="30" style="vertical-align: bottom;"> 微信
  						</td>
  						<td width="7%" style="text-align:right;">
  							<i class="payGou payGouChoose"></i>
  						</td>
  					</tr>
  				</table>
  			</li>
  		</ul>
  	</div>
  	<div class="totalNeedPay">
  		<span v-if='!payFrom'>
  			需支付<span class="bigTotal" v-if='tongVal'>{{(sum-useB/100).toFixed(2)}}</span>
        <span class="bigTotal" v-if='!tongVal'>{{sum.toFixed(2)}}</span>元
  		</span>
      <span v-if='payFrom'>
        需支付<span class="bigTotal">{{(shopMess.sum)}}</span>元
      </span>
  		<div class="btnPay" @click="toPay">
  			去支付
  		</div>
  	</div>
    <confirm v-model="show2" title="使用通币数"
        theme="ios" @on-confirm="onConfirm">
        <div class="useTong">
          <group>
          <x-number title="" v-model="tongSelect" :step='100' button-style='round' width='2rem' :min='100' :max='useTongB'></x-number>
          </group>
        </div>
    </confirm>
    <div class="rule">
    <x-dialog v-model="showDiaLog" class="dialog-demo" hide-on-blur>
      <div class="tongRule">
        <h1>通币使用规则</h1>
        <p>使用条件</p>
        <p>1、订单金额大于2元（含）</p>
        <p>2、通币数量大于100（含）</p>
        <p>使用数量</p>
        <p>1、使用的通币数为100的整倍数</p>
        <p>2、100个通币抵1元</p>
        <div class="btns" @click='showDiaLog=false'>我知道了</div>
      </div>
    </x-dialog>
    <x-dialog v-model="showAllCar" class="dialog-demo" hide-on-blur>
      <div class="allCar">
        <ul>
          <li v-for='(item,index) in allCar' @click='switchCar(item)' :key="index">{{item.LICENCE}}</li>
        </ul>
      </div>
    </x-dialog>
    </div>
    <form :action='zhifuBao' name="alipay" id="alipay" method="post">
        <input type="hidden" value="" name="jsonParams" id="jsonParams">
    </form>
  </div>
</template>
<script>
/*支付*/
import {XHeader,Popup,XSwitch,Confirm,XNumber,XDialog,Group,Loading} from 'vux';
import shopPay from './shop-pay';//商品支付组件
import { setCookie, getCookie,appid,pushStateUrl,GetQueryString} from '../util/commonUtils';
import wx from 'weixin-js-sdk'//微信jssdk
export default {
  name:"pay",
  // 数据
  data(){
    return{
    	  userId:'',
        payFrom:'',//代表支付来自哪里
        sum:0,  //总价
        tongVal:false, //切换是否使用通币
        show2:false,
        tongSelect:0,//选择的通币数
        showDiaLog:false,
        allTong:0,// 所有的通币数
        zhifuBao:'', //支付宝支付链接
        useB:0, //最后使用的通币数
        clickPay:false,  //控制多次提交
        showShopMess:{},  //用来显示的商品信息
        address:[],  //地址信息
        addFlag:-1,  //显示地址方式
        CASHVOL_SERV_PARAMS:[],  //获取可用代金券参数(firstClass,secondClass)
        selectComdId:'',  //选择商店id
        shopMess:'',  //商品信息
        shopClass:'',  //商品的种类
        selectCars:[],  //选中车辆信息
        showAllCar:false,  //显示所有车辆
        allCar:'', //用户所有车辆的信息
     }
  },
  // 计算属性
  computed:{
  	isWX(){
  		let UA = navigator.userAgent;
  		if ( UA.match(/MicroMessenger/i) == 'MicroMessenger' ) {
  			return true;
  		}
  		return false;
  	},
    useTongB(){//可以使用的通币数
      let num;
      num=this.sum*0.5;
      if(this.allTong>num*100){
        return parseInt(num)*100;
      }else{
        return parseInt(this.allTong/100)*100;
      }
    },
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.$vux.loading.hide();
    next();
  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.payFrom=localStorage.getItem('from');//代表来自订单列表
    if(!this.isWX){//配置支付提交地址
        // this.zhifuBao='http://carnt.carnettong.com:8088/CARNT/Bargain/getPayInfo.action'
        this.zhifuBao='http://4scafe.carnettong.com/CARNT/Bargain/getPayInfo.action'
    }
    if(!this.payFrom){
      this.getUserTongB();
    }
    //当有商品数据是去封装商品数据
    if(sessionStorage.getItem('shopMess')){
      let obj=JSON.parse(sessionStorage.getItem('shopMess'));
      this.shopMess=JSON.parse(sessionStorage.getItem('shopMess'));
      this.brandShop(obj);
    }
    if(!this.payFrom){//不是从订单列表跳转过来
      if(sessionStorage.getItem('selectAddress')){//从选择地址哪里跳转过来
        this.address.push(JSON.parse(sessionStorage.getItem('selectAddress')));
        this.addFlag=1;
      }else{
        if(this.shopClass==1||this.shopClass==3){
          this.getDefaultAddress();
        }
      }
    }else{
      this.selectCars=JSON.parse(sessionStorage.getItem('shopMess')).selectCars;
      this.address=JSON.parse(sessionStorage.getItem('shopMess')).address;
      this.addFlag=1;
    }
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.$vux.loading.hide();
    next();
  },
  // el被创建，并挂载到实例上
  mounted(){
  },
  // 方法（实例中的方法）-----------
  methods:{
    goBack(){
      history.go(-1);
    },
    //选择地址
    selectAddress(){
      if(!this.payFrom){
        this.$router.push('/selectAddress');
      }
    },
    //添加地址
    addAddress(){
      this.$router.push('/updateAddress');
    },
    //将数据按店分配
    brandShop(obj){
      for(let i=0;i<obj.ORDER_LIST.length;i++){
        this.sum+=Number(obj.ORDER_LIST[i].SERV_PARAMS[0].PRICE)*Number(obj.ORDER_LIST[i].SERV_PARAMS[0].QUANTITY);
        this.CASHVOL_SERV_PARAMS.push(obj.ORDER_LIST[i].SERV_PARAMS[0].SERV_FIRST_CLASS);
        this.CASHVOL_SERV_PARAMS.push(obj.ORDER_LIST[i].SERV_PARAMS[0].SERV_SECON_CLASS);
        if(this.showShopMess.hasOwnProperty(obj.ORDER_LIST[i].COMP_ID)){
          // console.log(obj.ORDER_LIST[i].SERV_PARAMS);
          this.showShopMess[obj.ORDER_LIST[i].COMP_ID].SERV_PARAMS=this.showShopMess[obj.ORDER_LIST[i].COMP_ID].SERV_PARAMS.concat(obj.ORDER_LIST[i].SERV_PARAMS);
        }else{
          this.showShopMess[obj.ORDER_LIST[i].COMP_ID]=obj.ORDER_LIST[i];
        }
      }
      this.watchShopClass();
      
    },
    //判断商品中含有车品和美容中的哪几种
    watchShopClass(){//10002美容   10007车品
      if(this.CASHVOL_SERV_PARAMS.includes(10002)&&this.CASHVOL_SERV_PARAMS.includes(10007)){//美容
        this.shopClass=3;
        if(!this.payFrom){
          this.getUserCar();
        }
      }else if(this.CASHVOL_SERV_PARAMS.includes(10002)){//美容
        if(!this.payFrom){
          this.getUserCar();
        }
        this.shopClass=2;
      }else if(this.CASHVOL_SERV_PARAMS.includes(10007)){//车品
        this.shopClass=1;
      }
    },
    //美容需要获取用户的所有车辆
    getUserCar(){
      //获取用户所有车辆
      this.$fetchGet('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
          this.allCar=res.CARS;
          let that=this;
          this.selectCars=res.CARS.filter(function(items){
            return items.CAR_ID==that.userId;
          });
          if(this.selectCars.length==0){
            this.selectCars.push(res.CARS[0]);
          }
        }
      },err=>{
        console.log(err);
      })
    },
    selectCarMess(){
      this.showAllCar=true;
    },
    //切换车辆信息
    switchCar(item){
      if(!this.payFrom){
        this.selectCars=[item];
        this.showAllCar=false;
      }
    },
    //获取用户的默认地址
    getDefaultAddress(){
      this.$fetchPost('/UserAdrWeb/getDefaultAdr.action',{USER_ID : this.userId},{emulateJSON:true})
      .then(res=>{
        // console.log(res);
        if(res.RESULT_DATA.length>0){
          this.addFlag=1;
        }else{
          this.addFlag=0;
        }
        this.address=res.RESULT_DATA;
      },err=>{

      });
    },
    //获取微信的配置信息
    getConfig(){
      let timestamp,nonceStr,signature;
      this.$fetchPost('/UserWeb/getConfig.action',{'url' : window.location.href},{emulateJSON:true})
      .then(res=>{
        var data = res;
        timestamp = data.timestamp;
        nonceStr =  data.nonceStr;
        signature = data.signature;
        // console.log(timestamp,nonceStr,signature,appId)
        wx.config({
            debug : false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId :appid, // 必填，公众号的唯一标识
            timestamp : timestamp, // 必填，生成签名的时间戳
            nonceStr : nonceStr, // 必填，生成签名的随机串
            signature : signature,// 必填，签名，见附录1
            jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage','chooseWXPay', 'showOptionMenu' ]
        });
        let that=this;
        wx.ready(function(){
          if(sessionStorage.getItem('oneP')){//防止调用手机物理返回键再一次微信支付弹框
            sessionStorage.removeItem('oneP');
            sessionStorage.remove('orderMess');
            return;
          }
          that.autoPay();
        })
      },err=>{

      });
    },
    //授权回来自动支付
    autoPay(){
      // alert(JSON.parse(sessionStorage.getItem('orderMess')));
      if(sessionStorage.getItem('orderMess')){//授权回来防止多次创建订单，自动提交订单
        let obj=JSON.parse(sessionStorage.getItem('orderMess'));
        this.distribuObjs=JSON.parse(sessionStorage.getItem('distribuVoucher'));
        sessionStorage.setItem('oneP','1');
        let TRADE_NO=obj.TRADE_NO;
        let TOTAL_FEE=obj.TOTAL_FEE;
        let BODY=obj.BODY;
        let ORDER_NO=obj.ORDER_NO;
        this.wxPay(TRADE_NO,TOTAL_FEE,BODY,ORDER_NO);
        //清除流水号，总价，描述的信息
      }
    },
    //使用通币弹框显示
    useTong(){
      this.show2=true;
      this.tongSelect=this.useB;
    },
    //使用通币弹框显示,点击确定后的操作
    onConfirm(){
      this.show2=false;
      this.useB=this.tongSelect;
    },
    //显示通币使用规则
    showTongRule(){
      this.showDiaLog=true;
    },
    //获取用户通币数
    getUserTongB(){
      this.$fetchPost('/ExperienceValueWeb/getMemberInfoByUserId.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
          this.allTong=res.INTEGRAL;
          if(res.INTEGRAL>100){
            let num;
            num=this.sum*0.5;
            if(this.allTong>num*100){
              this.useB=parseInt(num)*100;
            }else{
              this.useB=parseInt(this.allTong/100)*100;
            }
          }
        }
      },err=>{

      })
    },
    // 免费支付操作，只需要创建订单即可
    freePay(obj){
        this.$fetchPost('/Bargain/getPayInfo.action',{jsonParams:JSON.stringify(obj)}).then(res=>{
          this.$vux.loading.hide();
          // console.log(res);
          this.clickPay=false;
          if(res.STATUS_CODE==1){
             let TRADE_NO=res.TRADE_NO;//流水号
             let TOTAL_FEE=res.TOTAL_FEE/100;//总金额
             let BODY=res.BODY;//商品描述
             let ORDER_NO=res.ORDER_NO;//订单号
             this.$router.push('/order/1');
          }else if(res.STATUS_CODE==19){
            this.$vux.alert.show({
                title: '提示',
                content: '重复使用代金券'
            })
          }else if(res.STATUS_CODE==20){
            this.$vux.alert.show({
                title: '提示',
                content: '代金券超出可使用数'
            })
          }else if(res.STATUS_CODE==50){
            this.$vux.alert.show({
                title: '提示',
                content: res.RESULT_MSG
            })
          }else if(res.STATUS_CODE==21){
            this.$vux.alert.show({
                title: '提示',
                content: res.RESULT_MSG
            })
          }
        },err=>{

        })
    },
    //去支付(车品)
    toPay(){
      // 免费开团不需要调取支付，直接创建订单信息
      if(sessionStorage.getItem('orderMess')){
        this.autoPay();
        return;
      }
      let obj={};
      let that=this;
      obj.ORDER_ID=this.shopMess.ORDER_ID;
      obj.USER_ID=this.userId;
      obj.SLOGINSYSTEM='web';
      if(!this.userId){//判断是否登录
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
        return;
      }
      if(this.shopClass==3||this.shopClass==1){
        if(this.address.length==0){
          this.$vux.alert.show({
            title:'提示',
            content:'请选择收货地址'
          })
          return;
        }
        obj.ADR_ID=this.address[0].ADR_ID;
      }
      if(this.tongVal){
        obj.ISUSE_TB=1;//使用通币
        obj.TB_NUM=this.useTongB;
      }else{
        obj.ISUSE_TB=0;
      }
      //当砍到0元时直接创建订单
      let freeFlag=this.payFrom&&this.sum==0;
      if(freeFlag){
      	obj.PAY_WAY=4;
        this.freePay(obj);
        return;
      }
      this.$vux.loading.show({
       text: '提交中...'
      })
      if(!this.payFrom){//非来自订单列表
        if(this.isWX){
          obj.PAY_WAY=2;//微信
          this.wxCPay(obj);
        }else{
          obj.PAY_WAY=1;//支付宝
          this.alipay(obj);
        }
      }
    },
    // 支付宝支付
    alipay(obj){
      document.getElementById('jsonParams').value = JSON.stringify(obj);
      document.getElementById('alipay').submit();
    },
    //微信支付
    wxCPay(obj){
        if(this.clickPay){
          return;
        }
        this.clickPay=true;
        let str=JSON.stringify(obj);
        this.$fetchPost('/Bargain/getPayInfo.action',{jsonParams:str}).then(res=>{
          this.$vux.loading.hide();
          // alert(JSON.stringify(res));
          if(res.STATUS_CODE==1){
            let TRADE_NO=res.TRADE_NO;//流水号
            let TOTAL_FEE=res.TOTAL_FEE/100;//总金额
            let BODY=res.BODY;//商品描述
            let ORDER_NO=res.ORDER_NO;//订单号
            if(TOTAL_FEE==0){
              this.$vux.alert.show({
                  title: '提示',
                  content: '支付成功',
                  onHide () {
                    that.$router.push('/order/1');
                  }
              })
            }else{
              this.wxPay(TRADE_NO,TOTAL_FEE,BODY,ORDER_NO);//调起微信的统一支付
            }
          }else if(res.STATUS_CODE==19){
            this.$vux.alert.show({
                title: '提示',
                content: '重复使用代金券'
            })
          }else if(res.STATUS_CODE==20){
            this.$vux.alert.show({
                title: '提示',
                content: '代金券超出可使用数'
            })
          }else if(res.STATUS_CODE==50){
            this.$vux.alert.show({
                title: '提示',
                content: res.RESULT_MSG
            })
          }else if(res.STATUS_CODE==21){
            this.$vux.alert.show({
                title: '提示',
                content: res.RESULT_MSG
            })
          }
        },err=>{

        })
    },
    // 微信统一支付
    wxPay(TRADE_NO,TOTAL_FEE,BODY,ORDER_NO){
      //流水号TRADE_NO，支付金额PRICE，商品描述BODY
      let paystr=TRADE_NO+","+TOTAL_FEE+","+BODY;
      this.$vux.loading.hide();
      let that=this;
      var augstr = TRADE_NO+','+TOTAL_FEE+','+BODY;
      let url=location.href;
      var json = {
        'returnUrl': url,
        'paystr':augstr
      };
      this.$fetchPost('/WeChat/getOrder.action',json).then(res=>{
        let obj={
          TRADE_NO:TRADE_NO,
          TOTAL_FEE:TOTAL_FEE,
          BODY:BODY,
          ORDER_NO:ORDER_NO
        }
        sessionStorage.setItem('orderMess',JSON.stringify(obj));
        sessionStorage.setItem('distribuVoucher',JSON.stringify(this.distribuObjs));
        if(res.CODE==0){
          //跳过去授权
          // alert(1);
          window.location.href = window.getIps+'/CARNT/WeChat/OAuth.action';
        }else if(res.CODE==1){
          this.clickPay=false;
          let timestamp=res.timestamp;
          let noncestr=res.noncestr;
          let prepayid=res.prepayid;
          let sign=res.sign;
          let orderType=res.groupon_user_id;
          //调起微信支付
            wx.chooseWXPay({
              appId: appid,
              timestamp: timestamp, //支付签名时间戳
              nonceStr: noncestr, //支付签名随机串，不长于 32 位
              package: "prepay_id=" + prepayid, //统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
              signType: 'MD5', //签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: sign.toUpperCase(), //支付签名
              success: function(ress) {
                switch (ress.errMsg) {
                  case 'chooseWXPay:cancel':
                    // 清空保存的订单信息
                    that.$vux.alert.show({
                        title: '提示',
                        content: '取消支付！',
                    })
                    break;
                  case 'chooseWXPay:fail':
                    that.$vux.alert.show({
                        title: '提示',
                        content: '支付失败！（' + ress.err_desc + '）',
                    })
                    break;
                  case 'chooseWXPay:ok':
                    // 清空保存的订单信息
                    sessionStorage.removeItem('orderMess');
                    sessionStorage.removeItem('distribuVoucher');
                    that.$vux.alert.show({
                        title: '提示',
                        content: '支付成功！',
                        onHide () {
                          if(orderType==0){
                            that.$router.push('/order/1');
                          }else{
                            that.$router.push('/gPaySuccess/'+orderType);
                          }
                          
                        }
                    })
                    break;
                  default:
                    break;
                }
              },
              cancel:function(ress){
                that.$vux.alert.show({
                    title: '提示',
                    content: '支付取消',
                })
              },
              fail:function(ress){
                alert(JSON.stringify(ress));
              }
            });
        }
      },err=>{

      })
    }

  },
  // 子组件
  components:{
    XHeader,
    shopPay,
    Popup,
    XSwitch,
    Confirm,
    XNumber,
    XDialog,
    Group,
    Loading
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../assets/css/public.less');
.pay{
  width: 7.5rem;
  padding-bottom: 0.9rem;
  min-height: 100%;
  background: #eaeaea;
  .allCar{
    width: 100%;
    height: 9rem;
    background: #fff;
    overflow: scroll;
    li{
      color: #444;
      font-size: 0.3rem;
      height: 1rem;
      line-height: 1rem;
      text-align: left;
      padding-left: 0.2rem;
      font-weight: 550;
      .borderBFu(#ededed);
    }
  }
  .address{
    height: 1.7rem;
    margin-bottom: 0.2rem;
    background:#fff url(../assets/image/pay/addressBg.png) left bottom no-repeat;
    background-size: 7.5rem 0.08rem;
    img{
      width:0.4rem;
      height: 0.4rem;
      margin-right: 0.2rem;
      min-width: 0.4rem;
    }
    span{
        font-size: 0.26rem;
        color: #000;
    }
    .addressTop{
      padding: 0 0.2rem;
      height: 0.8rem;
      display: flex;
      align-items:center;
      .borderBFu(#ededed);
      .user{
        align-items:center;
        width:60%;
        display: flex;
      }
      .tel{
        display: flex;
        align-items:center;
      }
    }
    .addressBot{
      display: flex;
      padding: 0 0.2rem;
      align-items:center;
      height: 0.8rem;
      span{
        width: 100%;
        text-align: left;
        padding-right: 0.2rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
      }
    }
  }
  .noAddress{
    display: flex;
    justify-content:center;
    align-items:center;
    img{
      width:0.67rem;
      height: 0.88rem;
    }
    span{
      font-size: 0.25rem;
      color: #ccc;
    }
  }
  .tongRule{
    text-align: left;
    h1{
      font-size: 0.33rem;
      padding: 0 0.1rem;
      color: #333;
      text-align: center;
      height: 0.6rem;
      line-height: 0.6rem;
    }
    p{
      font-size: 0.24rem;
      color: #333;
      padding:0.1rem;
    }
    .btns{
      font-size: 0.3rem;
      height: 0.7rem;
      line-height: 0.7rem;
      background: #ff0000;
      color: #fff;
      text-align: center;
    }
  }
  .payOnline{
    font-size: .3rem;
    text-align: left;
    width: 7.5rem;
    margin: 0 auto;
  	padding: 0.2rem 0.2rem;
  	background: #ebebeb;
  }
  .useTong{
    height: 0.8rem;
  }

  .settle{
    display: flex;
    height: 0.8rem;
    background: #fff;
    line-height: 0.8rem;
    align-items:center;
    padding: 0 .2rem;
    justify-content: flex-end;
    span{
      font-size: 0.25rem;
      padding-left: 0.1rem;
    }
    em{
      font-style: normal;
      font-size: 0.3rem;
      color: #ec383f;
      font-weight: bold;
    }
    .settleAll{
      font-size: 0.31rem;
    }
  }
  .allVoucher{
    overflow-y: scroll;
  	.voucherItem{
  		background: #fff;
  		display: flex;
  		padding: 0.1rem 0.2rem;
  		border-bottom: 1px solid #ede9e9;
  		.itemLeft{
  			width: 2.31rem;
  			height: 1.3rem;
  			background: url(../assets/image/ticket/1.png) no-repeat;
  			background-size: 2.31rem 1.3rem;
  			color: #fff;
  			div{
  				width: 0.37rem;
  				height: 0.37rem;
  				margin:0.1rem 0 0 0.3rem;
  				background: url(../assets/image/pay/noSelect.png) no-repeat;
  			    background-size: 0.37rem 0.37rem;
  			}
  			.on{
  				background: url(../assets/image/pay/select.png) no-repeat;
  			    background-size: 0.37rem 0.37rem;
  			}
  			h1{
  				font-size: 0.6rem;
  				line-height: 0.5rem;
  				margin-top: -0.05rem;
  			}
  			p{
  				line-height: 0.3rem;
  				font-size: 0.25rem;
  				text-align: right;
  				padding-right: 0.4rem;
  			}
  		}
      .bg2{
        background: url(../assets/image/ticket/2.png) no-repeat;
        background-size: 2.31rem 1.3rem;
      }
      .bg3{
        background: url(../assets/image/ticket/3.png) no-repeat;
        background-size: 2.31rem 1.3rem;
      }
      .bg4{
        background: url(../assets/image/ticket/4.png) no-repeat;
        background-size: 2.31rem 1.3rem;
      }
      .bg5{
        background: url(../assets/image/ticket/5.png) no-repeat;
        background-size: 2.31rem 1.3rem;
      }
  		.itemRight{
  			padding-left: 0.3rem;
  			text-align: left;
  			h1{
  				font-size: 0.27rem;
  				line-height: 0.4rem;
  				padding-top: 0.1rem;
  			}
  			h2{
  				font-size: 0.24rem;
  				line-height: 0.4rem;
  			}
  			p{
  				font-size: 0.22rem;
  				line-height: 0.4rem;
  			}
  		}
  	}
  }
  .voucher{
  	height: 0.8rem;
  	line-height: 0.8rem;
  	.allVoucher{
  		height: 100%;
  	}
  	.voucherSelect{
      background: #fff;
  		font-size: 0.26rem;
  		text-align: left;
  		overflow: hidden;
  		span{
  			padding-left: 0.2rem;
        color:#000;
  		}
      em{
        font-size: 0.23rem;
        color: #666;
        font-style: normal;
        padding-right: 0.2rem;
        float: right;
      }
  		img{
  			float: right;
  			padding-right: 0.2rem;
  			width: 0.32rem;
  			height: 0.22rem;
  			margin-top: 0.27rem;
  		}
  	}
  }
  .tong{
    display: flex;
    background: #fff;
    label{
      font-size: 0.3rem;
      width: 15%;
      text-align: left;
      padding-left: 0.2rem;
      color: #000;
    }
    span{
      width: 60%;
      text-align: left;
      font-size: 0.25rem;
      line-height: 0.8rem;
      color: #686868;
      img{
        width: 0.35rem;
        height: 0.35rem;
        margin-top: -0.05rem;
        vertical-align: middle;
      }
    }
    .switch{
      float: right;
      margin-top: 0.07rem;
    }
  }
  .useB{
    height: 0.8rem;
    padding-left: 0.2rem;
    display: flex;
    align-items:center;
    font-size: 0.3rem;
    text-align: left;
    background: #fff;
    label{
      font-weight: 600;
      color: #000;
    }
    span{
      color: #ff0000;
    }
    .useNum{
      padding: 0.1rem;
      margin:0 0.1rem;
      border-radius: 0.1rem;
      border:1px solid #ede9e9;
      img{
        width: 0.32rem;
        height: 0.18rem;
        padding-left: 0.1rem;
      }
    }
    em{
      font-style: normal;
    }
  }
  .commonListBox{
  	background: #fff;
  	/* border-radius: 5px; */
  	width: 7.5rem;
    padding: 0.1rem 0.25rem;
  	margin: 0 auto;
  }
  .orderRealList,{
	text-align: left;
	li{
		line-height: .5rem;
		width: 100%;
		table{
			width: 100%;
			border:0;
			td{
				font-size: .3rem;
        line-height: 0.6rem;
				.payGouChoose{
					display: block;
					width: 0.4rem;
					height: 0.4rem;
					background: url(../assets/image/maintain/checked.png) no-repeat;
					background-size: 0.4rem 0.4rem; 
				}
        img{
          margin-right: 0.1rem;
        }
			}
		}
	}
  }
  .tableAlingR{
	text-align:right;
	color: #333333;
  }
  /* 底部支付 */
  .totalNeedPay{
		height: 1rem;
		width: 100%;
		z-index: 999;
		line-height: 1rem;
		position: fixed;
		bottom: 0;
		text-align: left;
		background: #2a2a2a;
		color: #fff;
		>span{
      display: inline-block;
      height: 1rem;
      line-height: 0.78rem;
			>span{
				color: #ce0d20;
			}
			font-size: .3rem;
			vertical-align: middle;
			padding-left: .2rem;
			.bigTotal{
				font-size: .35rem;
				color: #ff0000;
				padding: 0rem 0.06rem;
        font-weight: bold;
			}

		}
		.btnPay{
			width: 27%;
			height: 100%;
			float: right;
			font-size: .3rem;
			text-align: center;
			background: #dd0e24;
			vertical-align: middle;
			color: #fff;
		}
	}
}
</style>